<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    

<!DOCTYPE >
<html>
<!-- 首页学习计划 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../css/top.css" />
<link rel="stylesheet" href="../css/home.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/top.js"></script>
<script src="../js/echarts.min.js"></script>
<script src="../js/the-charts.js"></script>
<title>智行校园-精准化服务平台</title>
</head>
<body class="background">
   <input type="hidden" value="我的主页"  />
   <div class="container">
      <div class="ltcontainer" style="border:0;width:55%">
			  <h3 style="text-align:left;margin:0;display:inline-block;float:left">学习计划</h3>
			  <select id="study_select" style="display:inline-block;margin-left: 1em;float:left;padding: 0.3em;"></select>
			  <div id="my_study_plan" style="width:100%;min-height:25em;border:0;margin-top:1em"></div>
      </div>
      <div class="rcontainer" style="border:0;width: calc(45% - 4.3em);">
         <h3>素质教育选修</h3>
         <table class="my_table" cellspacing="0" cellpadding="0" style="width:100%"></table>
      </div>
   </div>
   <form method="post"  name="userid_form" >
	    <input type="hidden" value="" name="userid" />
    </form>
	<script> 
	   var user_id='<%=request.getParameter("userid")%>';
	   $('body').append(' <input id="user_id" style="display:none" value="'+user_id+'"  />');
	   $('form[name="userid_form"] input[name="userid"]').attr('value',user_id);
	 $.ajax({
		 url : '/College/home/getXNXQ',
		 data:{userid:user_id},
		 type : 'post'
	  }).done(
			function(data) {
				paint_bar({userid:user_id,xn:data.now[0].xn,xq:data.now[0].xq});
				for(var m=0;m<data.list.length;m++){
					if(data.now[0].xn==data.list[m].xn&&data.now[0].xq==data.list[m].xq){
					
						$('select#study_select').append('<option value="'+data.list[m].xn+'" xq="'+data.list[m].xq+'" selected="selected">'+data.list[m].info+'</option>');   
					}
					else
				        $('select#study_select').append('<option value="'+data.list[m].xn+'" xq="'+data.list[m].xq+'">'+data.list[m].info+'</option>');
				 
			   }
				$('select#study_select').change(function(){
					paint_bar({userid:user_id,xn:$(this).find('option:selected').attr('value'),xq:$(this).find('option:selected').attr('xq')});
				  });
			});
   function paint_bar(param){
		$.ajax({
			url : '/College/home/getXXJH',
			data:param,
			type : 'post'
		}).done(
				function(data) {
					var c = echarts.init($('#my_study_plan')[0], 'macarons');
					c.hideLoading();
					var option = Config('',false,'bar').option6(data);
					c.setOption(option, true);
					$(window).resize(function() {
						c.resize();
						c.setOption(option);
					});
					paint_table({userid:user_id,xn:param.xn,xq:param.xq,kcxz:data.xAxis_data[0]},'/College/home/getXXJHDetailsComplete','学习目标');
					c.on('click', function(p) {
						if(p.name!='最高值'&&p.name!='最低值'){
						     if(p.seriesName=='学习目标')
						    	 paint_table({userid:user_id,xn:param.xn,xq:param.xq,kcxz:p.name},'/College/home/getXXJHDetailsAll',p.seriesName);
						     else
						    	 paint_table({userid:user_id,xn:param.xn,xq:param.xq,kcxz:p.name},'/College/home/getXXJHDetailsComplete',p.seriesName);
						}
					});
				});
	}
   function paint_table(param,url,style){
	   $('div.rcontainer h3:eq(0)').text(param.kcxz+'( '+style+' )');
	   $('div.rcontainer table.my_table').empty();
		$.ajax({
			url : url,
			data:param,
			type : 'post'
		}).done(
				function(data) {
					 $('div.rcontainer table.my_table').append('<thead><tr><td>序号</td><td>课程名称</td><td>应得学分</td><td>实得学分</td></tr></thead><tbody></tbody>');
					 for(var n=0;n<data.length;n++){
					     $('.my_table tbody').append('<tr></tr>');
					     $('.my_table tbody tr:eq('+n+')').append('<td>'+data[n].number+'</td>');
					     $('.my_table tbody tr:eq('+n+')').append('<td>'+data[n].kcmc+'</td>');
					     $('.my_table tbody tr:eq('+n+')').append('<td>'+data[n].total+'</td>');
					     $('.my_table tbody tr:eq('+n+')').append('<td>'+data[n].pass+'</td>');
					 }
				});
	}
   </script>
</body>
</html>